<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <meta name="MobileOptimized" content="320"/>
    <link href="../../resources/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <script src="../../resources/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="../../resources/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>


    <style>
        .btnBlack {
            margin-left: 3px;
            display: inline-block;
            background: #000;
            color: #FFF;
            font-size: 13px;
            line-height: 22px;
            border: none
        }


    </style>


</head>
<body onload="hello()">

<div style="margin-left:10px;margin-top:10px">

    <!--导航-->
    <div class="tabbable" id="sumManage" style="height: 60px">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#sumStorage" data-toggle="tab" id="sumImport">入库统计</a>
            </li>
            <li>
                <a href="#sumInput" data-toggle="tab" id="sumSale">销售额统计</a>
            </li>
            <li>
                <a href="#sumProfit" data-toggle="tab" id="sumProfitMain">利润统计</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade in active" id="sumStorage">
                <div id="showSumStorage" class="row">
                    <center>
                        <div class="col-md-12" style="margin-top:30px;margin-left: 128px">

                            <select name="yearSearch" id="importNumberYear">
                                <option value="2015" selected="selected">2015</option>
                                <option value="2016" >2016</option>
                            </select>
                            <select name="typeSearch" id="importNumberCategoryId" style="margin-left:10px">
                                <option value="0" selected="selected">全部商品</option>
                                <option th:each="category : ${categories}" th:text="${category.typeName}" th:value="${category.id}" value="">零食</option>
                            </select>

                            <select name="type" style="margin-left:10px" id="importNumberType">
                                <option value="1" selected="selected">数量</option>
                                <option value="2">耗资</option>
                            </select>

                            <input type="button" class="btnBlack" id="sumStorageSearch" value="生成统计图"
                                   style="margin-left:60px"/>
                            　　　　　　　　　　　
                            　　　　　　　　　
                        </div>
                    </center>
                </div>
            </div>


            <div class="tab-pane fade" id="sumInput">
                <div id="showSumInput" class="row">
                    <center>
                        <div class="col-md-12" style="margin-top:30px">

                            <select name="yearSearch" id="sumSaleYear">
                                <option value="2015" selected="selected">2015</option>
                                <option value="2016">2016</option>
                            </select>
                            <select name="monthSearch" id="sumSaleCategory" style="margin-left:10px">
                                <option value="1" selected="selected">全部统计</option>
                                <option value="2" >分类统计</option>
                            </select>
                            <select name="typeSearch" id="sumSaleProfit" style="margin-left:10px">
                                <option value="1" selected="selected">利润</option>
                                <option value="2">营业额</option>
                            </select>

                            <input type="button" class="btnBlack" id="sumInputSearch" value="生成统计图"
                                   style="margin-left:60px"/>

                        </div>
                    </center>
                </div>
            </div>


            <div class="tab-pane fade" id="sumProfit">
                <div id="showSumProfit" class="row">
                    <center>
                        <div class="col-md-12" style="margin-top:30px">

                            <select name="yearSearch" id="sumPieYear">
                                <option value="2015" selected="selected">2015</option>
                                <option value="2016">2016</option>
                            </select>
                            <select name="monthSearch" id="sumPieMonth" style="margin-left:10px">
                                <option value="0" selected="selected">全年</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                            </select>
                            <select name="typeSearch" id="sumPieProfit" style="margin-left:10px">
                                <option value="1" selected="selected">利润</option>
                                <option value="2">营业额</option>
                            </select>

                            <input type="button" class="btnBlack" id="sumProfitSearch" value="生成统计图"
                                   style="margin-left:60px"/>

                        </div>
                    </center>
                </div>
            </div>
        </div>
    </div>

    <div id="main" style="height:500px;margin-top:80px"></div>

</div>


<!--echarts-->
<script src="../../resources/echarts/echarts-all.js"></script>
<script type="text/javascript" th:inline="javascript">

    // <![CDATA[

    /**
     * 得到pie图option
     * @param backData 得到的后台数据转换成json对象
     * @returns {{title: {text: string, subtext: string, x: string}, tooltip: {trigger: string, formatter: string}, legend: {orient: string, x: string, data: string[]}, toolbox: {show: boolean, feature: {mark: {show: boolean}, dataView: {show: boolean, readOnly: boolean}, magicType: {show: boolean, type: string[], option: {funnel: {x: string, width: string, funnelAlign: string, max: number}}}, restore: {show: boolean}, saveAsImage: {show: boolean}}}, calculable: boolean, series: *[]}}
     */
    function getOptionPie(backData) {
        var option = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 11111
                            }
                        }
                    },
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '65%',
                    data: [
                        {value: 335, name: '直接访问'},
                        {value: 310, name: '邮件营销'},
                        {value: 234, name: '联盟广告'},
                        {value: 135, name: '视频广告'},
                        {value: 1548, name: '搜索引擎'}
                    ]
                }
            ]
        };

        option.title = backData.title;
        option.legend = backData.legend;
        option.series = backData.series;
        option.series[0].radius = '60%';
        return option;
    }

    function resetOption() {
        var option =  {
            title: {
                text: '测试',
                subtext: '纯属虚构'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['蒸发量', '降水量']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '蒸发量',
                    type: 'bar',
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name: '降水量',
                    type: 'bar',
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                    markPoint: {
                        data: [
                            {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18},
                            {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        }
        return option;
    }

    /**
     *
     * @param backData
     * @returns {{title: {text: string, subtext: string}, tooltip: {trigger: string}, legend: {data: string[]}, toolbox: {show: boolean, feature: {mark: {show: boolean}, dataView: {show: boolean, readOnly: boolean}, magicType: {show: boolean, type: string[]}, restore: {show: boolean}, saveAsImage: {show: boolean}}}, calculable: boolean, xAxis: *[], yAxis: *[], series: *[]}}
     */
    function getOption(backData) {
        var option = resetOption();
        option.title.text = backData.title;
        option.legend = backData.legend;
        option.xAxis = backData.xAxis;
        var markPoint = {
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
            ]
        };
        var markLine = {
            data: [
                {type: 'average', name: '平均值'}
            ]
        }
        option.series = backData.series;
        var length = backData.series.length;
        for (var i = 0; i < length; i++) {
            option.series[i].markPoint = markPoint;
            option.series[i].markLine = markLine;
        }
        return option;
    }


    function hello() {
        //第一个统计图
        var myChart1 = echarts.init(document.getElementById('main'));
        var back1 = /*[[${option1}]]*/ 'value';
        var backData1 = eval('(' + back1 + ')');
        var option1 = getOption(backData1);
        myChart1.setOption(option1);

    }

    $("#sumImport").click(function() {
        //第一个统计图
        var myChart = echarts.init(document.getElementById('main'));
        var back = /*[[${option1}]]*/ 'value';
        var backData = eval('(' + back + ')');
        var option = getOption(backData);
        myChart.setOption(option);
    })

    $("#sumSale").click(function() {
        //第二个统计图
        var myChart = echarts.init(document.getElementById('main'));
        var back = /*[[${option2}]]*/ 'value';
        var backData = eval('(' + back + ')');
        var option = getOption(backData);
//        console.log(JSON.stringify(option));
        myChart.setOption(option);
    })

    $("#sumProfitMain").click(function() {
        //第三个统计图
        var myChart = echarts.init(document.getElementById('main'));
        var back = /*[[${option3}]]*/ 'value';
        var backData = eval('(' + back + ')');
        var option = getOptionPie(backData);
        console.log(JSON.stringify(option));
        myChart.setOption(option);
    })

    /**
     * 第一模块
     */
    $("#sumStorageSearch").click(function () {
        var year = $("#importNumberYear option:selected").val();
        var categoryId = $("#importNumberCategoryId option:selected").val();
        var type = $("#importNumberType option:selected").val();
        $.ajax({
            url:'/statistics/importYearCategory',
            method:'post',
            data:{'year':year, 'categoryId' : categoryId, 'type' : type},
            success: function(obj) {
                var backData = eval('(' + obj + ')');
                var option = getOption(backData);
                //第一个统计图
                var myChart = echarts.init(document.getElementById('main'));
                myChart.setOption(option);
            }
        })
    });

    /**
     * 第二模块
     */
    $("#sumInputSearch").click(function () {
        var year = $("#sumSaleYear option:selected").val();
        var allOrOne = $("#sumSaleCategory option:selected").val();
        var profitOrSell = $("#sumSaleProfit option:selected").val();
        $.ajax({
            url:'/statistics/sumSale',
            method:'post',
            data:{'year':year, 'allOrOne' : allOrOne, 'profitOrSell' : profitOrSell},
            success: function(obj) {
                var backData = eval('(' + obj + ')');
                var option = getOption(backData);
                var myChart = echarts.init(document.getElementById('main'));
                myChart.setOption(option);
            }
        })
    });

    $("#sumProfitSearch").click(function () {
        var year = $("#sumPieYear option:selected").val();
        var month = $("#sumPieMonth option:selected").val();
        var profitOrSell = $("#sumPieProfit option:selected").val();
        $.ajax({
            url:'/statistics/sumSalePie',
            method:'post',
            data:{'year':year, 'month' : month, 'profitOrSell' : profitOrSell},
            success: function(obj) {
                var backData = eval('(' + obj + ')');
                var option = getOptionPie(backData);
                var myChart = echarts.init(document.getElementById('main'));
                myChart.setOption(option);
            }
        })
    });

    // ]]>

</script>


</body>

</html>
